<!-- 首页 -->
<template>
	<view class="container p-lr16">
		<view class="flex align-center justify-between">
			<text class="f-w500 f-s20">我的生活圈</text>
			<view class="flex align-center">
				<image src="/static/images/login/hint.png" class="width-14 height-14" mode="widthFix"></image>
				<text class="f-s12" @click="handleOpenPopup">上传须知</text>
			</view>
		</view>
		<view class="m-b15 m-t8 f-s14 text-gray">
			<text>最多上传9张，至少3张个人生活照片，需要本人出镜哦！</text>
		</view>
		<view class="flex flex-wrap justify-between">
			<UploadImage width="210rpx" height="210rpx" :limit="9" :multiple="true" v-model="form.album">
				<view class="upload-image">
					<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
					<text class="m-t8 text-gray f-s12">上传照片</text>
				</view>
			</UploadImage>
		</view>
		<view class="flex justify-center fixed-bottom bg-white">
			<view class="self-btn m-r10" style="background-color: #EBECED;width: 194rpx;" @click="handlePrev">
				<text class="text-black">上一步</text>
			</view>
			<view class="self-btn" style="width: 488rpx;" @click="handleConfirm">
				<text>下一步(3/4)</text>
			</view>
		</view>
		<u-popup :show="popupShow" round="40rpx" mode="bottom" @close="handleClose">
			<view class="popup">
				<view class="flex justify-between align-center">
					<view class="">
						<text class="f-s17 f-w500">我的生活上传须知</text>
					</view>
					<image src="/static/images/login/close.png" class="width-24" mode="widthFix" @click="handleClose">
					</image>
				</view>
				<view class="m-t8">
					<text class="f-s14" style="color: #585D66;">请上传用于展示个人魅力的高清，无水印照片</text>
				</view>
				<u-divider lineColor="#DDE0E6" textColor="#202020" textSize="24rpx" text="示例"></u-divider>
				<view class="flex justify-center" style="margin: 32rpx 0 42rpx 0;">
					<image src="/static/images/login/life/1-1.png"
						style="width: 336rpx;height: 200rpx;margin-right: 14rpx;" mode=""></image>
					<image src="/static/images/login/life/1-2.png" style="width: 336rpx;height: 200rpx;" mode="">
					</image>

				</view>
				<view class="self-btn margin-center full-width" @click="handleClose">
					<text>我知道啦</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UploadImage from '@/components/upload-image'
	import {
		authStepsDetails,
		lifeAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			UploadImage
		},
		data() {
			return {
				popupShow: false,
				form: {
					album: ''
				}
			}
		},
		created() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				authStepsDetails({
					auth_type: 4
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.form.album = auth_detail?.album?.join(',') ?? ''
				})
			},
			handleConfirm() {
				if (!this.validateForm(this.form)) return
				lifeAuth(this.form).then(res => {
					this.$emit('next', 4)
				})

			},
			validateForm(form) {
				let albumList = form.album.split(',')
				if (albumList.length < 3) {
					this.$toast('请至少上传3张照片')
					return false
				}
				return true
			},
			handlePrev() {
				this.$emit('next', 2)
			},
			handleOpenPopup() {
				this.popupShow = true
			},
			handleClose() {
				this.popupShow = false
			},
		}
	}
</script>

<style scoped lang="scss">


	.container {
		.popup {
			padding: 32rpx;
		}
	}
</style>